8b:I[903690,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/chunks/0e2tb6ztxas0b.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1f7u6rgo4cul0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/05pq8s6zv_wn1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/43vadfihbvtl1.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1gycrwvtm60qn.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3wkp7zrf5-jmz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3xh9s6el8_6_x.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ke63s91gpvy3.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1ccgxhg3rjfjo.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0vd414frz2dl_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2mgce5j5u79tt.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/01gmrqojqtlsu.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2qjug_t8m8oho.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2womqu661fmr2.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0qdgtnqed6832.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1po5wfdz3ceh_.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1lmne7b3yag00.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/330f8n_uwn2ft.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0h7t4vk9gyu0g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/160o23x6urtdh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1qov2bia_ns-o.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/10xq309qhj3gr.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/04t51g7mb5zjz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1m_h06jid1ekf.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/34kx6djl8qij7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3hwyfh3v3lizg.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3lzqzvqvppdbz.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3y2nzgu33897a.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2xm81q215cv7s.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/3vtvee1raa1hh.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0ylrm5ajfx1z7.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0j_lsstp2mbsx.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/0aas_nxnpj24g.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/42h7tmr-x85i0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/1pycny3zv2irk.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2nrg64o7044ea.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2wb66rh9_-phb.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2934g55qd7tuc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/111x4t_autsmc.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/18ivfh5uja4t0.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR","/chat-static/_next/static/chunks/2r3_xwoqt-j-8.js?dpl=dpl_HxVjJ817bNwXJbfkQ78xUtYkf5nR"],"SWRDataProvider"] 8d:T16b0,[V0_FILE]typescriptreact:file="components/3d-card-demo.tsx" "use client" import Image from "next/image" import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card" import Link from "next/link" export default function ThreeDCardDemo() { return ( Make things float in air Hover over this card to unleash the power of CSS perspective thumbnail

Try now → Sign up

) } [V0_FILE]typescriptreact:file="components/ui/3d-card.tsx" "use client" import { cn } from "@/lib/utils" import type React from "react" import { createContext, useState, useContext, useRef, useEffect } from "react" const MouseEnterContext = createContext<[boolean, React.Dispatch>] | undefined>(undefined) export const CardContainer = ({ children, className, containerClassName, }: { children?: React.ReactNode className?: string containerClassName?: string }) => { const containerRef = useRef(null) const [isMouseEntered, setIsMouseEntered] = useState(false) const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return const { left, top, width, height } = containerRef.current.getBoundingClientRect() const x = (e.clientX - left - width / 2) / 25 const y = (e.clientY - top - height / 2) / 25 containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)` } const handleMouseEnter = (e: React.MouseEvent) => { setIsMouseEntered(true) if (!containerRef.current) return } const handleMouseLeave = (e: React.MouseEvent) => { if (!containerRef.current) return setIsMouseEntered(false) containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)` } return (

{children}

) } export const CardBody = ({ children, className, }: { children: React.ReactNode className?: string }) => { return (

*]:[transform-style:preserve-3d]", className)}> {children}

) } export const CardItem = ({ as: Tag = "div", children, className, translateX = 0, translateY = 0, translateZ = 0, rotateX = 0, rotateY = 0, rotateZ = 0, ...rest }: { as?: React.ElementType children: React.ReactNode className?: string translateX?: number | string translateY?: number | string translateZ?: number | string rotateX?: number | string rotateY?: number | string rotateZ?: number | string [key: string]: any }) => { const ref = useRef(null) const [isMouseEntered] = useMouseEnter() useEffect(() => { handleAnimations() }, [isMouseEntered]) const handleAnimations = () => { if (!ref.current) return if (isMouseEntered) { ref.current.style.transform = `translateX(${translateX}px) translateY(${translateY}px) translateZ(${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)` } else { ref.current.style.transform = `translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)` } } return ( {children} ) } // Create a hook to use the context export const useMouseEnter = () => { const context = useContext(MouseEnterContext) if (context === undefined) { throw new Error("useMouseEnter must be used within a MouseEnterProvider") } return context } 84:["$","$L8b",null,{"chatId":"n7KapQHt5ru","children":["$","$L8c",null,{"data":{"@\"active-block\",\"n7KapQHt5ru\",":{"id":"b_6LjxSks73RR","messageId":"zDQ6Xln9ACExpswdsiuGcRPyJJyE8dsx","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"3d Card Demo","type":"code-project","project":"3d Card Demo"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"n7KapQHt5ru\",":false,"":null},"children":"$L8e"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This